<template>
  <div class="app-container">
    <div class="head-container">
      <!-- 搜索栏 -->
      <div v-if="searchToggle">
        <el-input v-model="query.keyword" clearable placeholder="关键词" style="width: 200px;" class="filter-item"
                  @keyup.enter="fetchList"/>

        <el-select v-model="query.categoryId" clearable placeholder="分类" class="filter-item">
          <el-option
              v-for="item in categories"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
        <el-select v-model="query.status" clearable placeholder="状态" class="filter-item">
          <el-option
              v-for="(item, key) in dict.label.GeneralStatus"
              :key="key"
              :label="item"
              :value="key"
          />
        </el-select>
        <rr-operation/>
      </div>

      <!-- 工具栏 -->
      <crud-operation ref="crudOperation"/>
    </div>

    <!-- 表格 -->
    <el-table height="100" row-key="id" ref="table" v-loading="tableLoading" :data="tableData" border style="width: 100%" @selection-change="selectionChangeHandler">
      <el-table-column type="selection" width="55"/>
      <el-table-column align="center" label="ID" prop="id" width="95"/>
      <el-table-column label="封面" width="80" align="center" prop="coverPicture">
        <template v-slot="scope">
          <el-image
              v-if="scope.row.coverPicture"
              style="width: 30px; height: 30px"
              :src="scope.row.coverPicture"
              :preview-src-list="[scope.row.coverPicture]"
              fit="scale-down"
              :lazy="true"
          />
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title"/>
      <el-table-column label="链接" prop="link" width="100"/>
      <el-table-column label="操作" v-permission="permission.edit.concat(permission.remove)" align="center" width="200" class-name="small-padding">
        <template v-slot="{row}">
          <ud-operation :data="row"></ud-operation>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination/>

    <!--表单组件-->
      <el-dialog :close-on-click-modal="false" v-model="dialog.visible"
                 :title="dialog.title" width="500px" draggable>
        <el-form ref="formRef" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="分类id" prop="categoryId">
            <el-input v-model="form.categoryId" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="链接地址" prop="link">
            <el-input v-model="form.link" style="width: 370px;"/>
          </el-form-item>
        </el-form>
        <template v-slot:footer class="dialog-footer">
          <el-button @click="dialog.visible = false">关闭</el-button>
          <el-button type="primary" :loading="dialog.status === DIALOG_STATUS.PROCESSING" @click="submitCE">确认
          </el-button>
        </template>
      </el-dialog>


  </div>


</template>

<script>
import Sortable from "sortablejs"

import useCrud from "@crud/useCrud"
import UdOperation from "@crud/UD.operation"
import rrOperation from "@crud/RR.operation"
import crudOperation from "@crud/CRUD.operation"
import pagination from "@crud/Pagination"
import {getList as fetchCategories} from "@/api/articlecat";
import {getCurrentInstance} from 'vue'
import articleApi from '@/api/demo'

export default {
  name: 'CrudTest',
  components: {UdOperation, rrOperation, crudOperation, pagination},
  dicts: ['GeneralStatus', 'test'],
  setup() {
    const { ctx } = getCurrentInstance()

    return {
      permission: {
        create: ['demo:save'],
        edit: ['demo:update'],
        remove: ['demo:remove']
      },
      ...useCrud({
        pageSize: 5,
        title: "文章",
        defaultForm: {
          categoryId: 1,
          link: 'link'
        },
        methods: {...articleApi},
        message: {
          updated: '更新成功漏....'
        },
        idField: 'id',
        optShow: {
          create: true,
          edit: true,
          remove: true,
          download: true,
          reset: true
        },
        hook: {
          handleEdit: (data) => {
            console.log(data)
            console.log(ctx.$router)
          },
          afterSearch: () => { console.log('hook after search'); return false}
        }
      })
    }
  },
  data() {
    return {
      categories: [],
      rules: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'change'
          }
        ],
        categoryId: [
          {
            required: true,
            message: '分类不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    // 获取分类列表
    fetchCategories().then(response => {
      this.categories = response
    })
  },
  mounted() {
    this.dragSort()
  },
  methods: {
    //表格拖动排序
    dragSort() {
      const elHead = this.$refs.table.$el.querySelectorAll('.el-table__header-wrapper > table > thead > tr')[0]

      Sortable.create(elHead, {
        onEnd: e => {
          // const columns = this.$refs.table.store.states.columns.value
          // const oldColumn = columns[e.oldIndex]
          // // const newColumn = columns[e.newIndex]
          // columns.splice(e.oldIndex, 1)
          // columns.splice(e.newIndex, 0, oldColumn)
          // for (let i = 0; i < columns.length; i++) {
          //   columns[i].no = i
          // }
          // this.$refs.table.store.states.columns.value = columns


          // 重排列配置列表
          const columns = this.$refs.table.store.states.columns.value
          const oldColumn = columns[e.oldIndex]
          const newColumn = columns[e.newIndex]
          const tableColumns = this.$refs.crudOperation.tableColumns
          const oldIndex = tableColumns.indexOf(oldColumn)
          const newIndex = tableColumns.indexOf(newColumn)
          const oldTableColumn = tableColumns[oldIndex]
          tableColumns.splice(oldIndex, 1)
          tableColumns.splice(newIndex, 0, oldTableColumn)
          this.$refs.crudOperation.updateColumnVisible()




        }
      })

    }

  }

}
</script>

<style>
/*.el-table__header-wrapper th div {*/
/*  cursor: move;*/
/*}*/
</style>
